<template>
  <div class="main_header">
    <div class="main_header_left oneLine">
      <img class="main_header_left_log" src="@/assets/image/logo.png" alt="" />
      <div class="main_header_left_list">
        <div
          class="main_header_left_list_item"
          @click="goto(item.path)"
          v-for="item in routerList"
          :key="item"
          :class="route.path == item.path ? 'main_header_left_list_active' : ''"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="main_header_right">
      <div class="main_header_right_input">
        <n-input type="text" placeholder="搜索" clearable passively-activated @keydown.enter="inputSearch" >
          <template #prefix>
            <span class="iconfont">&#xe633;</span>
          </template>
        </n-input>
      </div>
      <div class="main_header_right_user" @click="goto('/user')">
        <img v-if="store.state.loginInfo" class="main_header_right_user_img" :src="store.state.baseURL + store.state.userInfo?.userImg" alt="" />
        <img v-else class="main_header_right_user_img" src="@/assets/image/user.jpg" alt="" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { NInput } from "naive-ui";
import { useRouter,useRoute } from "vue-router";
import { useStore } from "vuex";
const store = useStore();

const route = useRoute();
const router = useRouter();
const routerList = [
  {
    name: "首页",
    path: "/",
  },
  {
    name: "分类",
    path: "/all",
  },
];
const goto = (path) => {
  router.push(path);
  if (path == '/user') {
    if(store.state.loginInfo==null){
      router.push('/login');
    }else{
      router.push('/user');
    }
  }
};
const inputSearch = (e) => {
  router.push(`/all?search=${e.target.value}`);
};
</script>
<style lang="scss" scoped>
@import "@/styles/base.scss";
.main_header {
  position: sticky;
  z-index: 1000;
  top: 0;
  height: 70px;
  width: 100vw;
  min-width: 1000px;
  background-color: #fcfcfc;
  box-shadow: $baseBoxshadow;
  padding: 0 $mainPadding;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &_right,
  &_left {
    display: flex;
    align-items: center;
  }
  &_left {
    &_log {
      width: 50px;
      height: 50px;
      margin-right: 0.5rem;
      cursor: pointer;
    }
    &_list {
      display: flex;
      align-items: center;
      &_item {
        cursor: pointer;
        margin: 0 10px;
        font-size: 1.2rem;
        transition: $baseTransition;
        &:hover {
          color: $baseColor;
        }
      }
      &_active {
        font-weight: bold;
        color: $baseColor;
      }
    }
  }
  &_right {
    flex-shrink: 0;
    &_input {
      padding: 20px;
    }
    &_user {
      &_img {
        cursor: pointer;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: $baseBorder;
      }
    }
  }
}
</style>
